<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>28-css过渡+动画-作业2</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			.box{width:300px;height:300px;background:red;margin:0 auto;}
			.box nav{width:300px;height:50px;background:pink;}
			.box nav a{position:relative;float:left;width:100px;height:50px;background:yellow;text-align:center;line-height:50px;font-size:20px;}
			.box nav a:after{position:absolute;top:0;left:99px;display:block;width:1px;height:50px;background:#111;content:"";}
			.box nav a:nth-child(2) div{opacity:0;width:100px;height:250px;background:#111;}
			
			.box nav a:nth-child(2):hover div{animation:navbox 1s linear;}
			@keyframes navbox{
				0%{}
				100%{opacity:1;}
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<nav>
				<a href="javascript:;">1</a>
				<a href="javascript:;">2
					<div></div>
				</a>
				<a href="javascript:;" class="nav-a">3</a>
			</nav>
		</div>
		
		
	</body>
</html>
